<template>
  <div class="login-vessel">

    <div class="login-banner-box">
      <span class="welcome-text" @click="toIndex">蓝聘，欢迎你</span>
      <span class="join-text">WELCOME TO JOIN US</span>
      <div class="banner-text">
        <span class="login-text">登录</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span @click="toRegister">注册</span>
      </div>
    </div>

    <div class="login-box">

      <div class="login-con">

        <div class="login-user-phone">
          <span class="user-input-text">手机号：</span>
          <input type="text" placeholder="请输入手机号" class="user-input-con" maxlength="11" v-model="phone"/>
        </div>

        <div class="login-user-pwd">
          <span class="user-input-text">密码：</span>
          <input type="password" placeholder="请输入密码" class="user-input-con" maxlength="16" v-model="pwd"/>
        </div>

        <div class="login-pwd-opt">
          <div class="remember-pwd">
            <el-checkbox v-model="rememberChecked" class="remember-checkbox">记住密码</el-checkbox>
          </div>

          <span class="forget-pwd" @click="toForgetPwd">忘记密码?</span>
        </div>

        <button type="button" class="login-user-btn" @click="toLogin">登录</button>
      </div>

    </div>

    <service></service>

    <div class="login-back-box" @click="toIndex">
      <img src="../../images/back_icon.png" class="login-back-pic"/>
      <span class="back-text">返回首页</span>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  import {getStore, removeStore, setSessionStore, setStore} from "../../config/util";
  import {Base64} from 'js-base64';
  import {checkPhone, checkPwd} from "../../config/verify";
  import {Loading} from 'element-ui';
  import {baseUrl} from "../../config/env";
  import service from "../../components/service";

  export default {
    data() {
      return {
        rememberChecked: false,
        phone: "",
        pwd: "",
      }
    },
    created() {
      let pwd = getStore("localPwd");
      let phone = getStore("localPhone");
      if (pwd && phone) {
        this.phone = Base64.decode(phone);
        this.pwd = Base64.decode(pwd);
        this.rememberChecked = true;
      } else {
        this.phone = "";
        this.pwd = "";
      }
    },
    methods: {
      toRegister() {
        this.$router.push("/register");
      },
      toLogin() {//登录
        if (checkPhone(this.phone) && checkPwd(this.pwd, 2)) {
          let loading = Loading.service({
            text: '拼命加载中....',
            lock: false,
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let data = {"phone": this.phone, "password": md5(this.pwd), "type": 0};

          this.axios.post(baseUrl + "/login/login_api", data).then((res) => {
            loading.close();
            let retObj = res.data;
            if (retObj.data.msg == "null") {
              this.$message({message: "用户名或密码错误", center: true, type: 'error', duration: 1000});
              return;
            } else if (retObj.data.msg == "error") {
              this.$message({message: "用户名或密码错误", center: true, type: 'error', duration: 1000});
              return;
            } else {
              this.rememberPwd(); //记住密码
              setSessionStore("userToken", retObj.data.userToken); //用户令牌
              setSessionStore("userWand", Base64.encode(retObj.data.id)); //用户Id
              setSessionStore("nickName", retObj.data.userName); //用户Id
              this.$router.push("/index");
            }
          }).catch(() => {
            loading.close();
            this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
          });
        }
      },
      rememberPwd() {//记住密码
        let phone = this.phone;
        let pwd = this.pwd;
        if (this.rememberChecked) {
          setStore("localPhone", Base64.encode(phone));
          setStore("localPwd", Base64.encode(pwd));
        } else {
          removeStore("localPwd");
        }
      },
      toForgetPwd() {
        this.$router.push("/forgetPwd");
      },
      toIndex() {
        this.$router.push("/index");
      }
    },
    components: {
      service
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/mixin";

  .login-vessel {
    .wh(100%, 100%);
    .login-banner-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 240px);
      .bg-image("../page/user/login_banner.png");
      .welcome-text {
        .size-color(36px, #FFF);
        padding-top: 74px;
        padding-bottom: 13px;
        &:hover {
          cursor: pointer;
        }
      }
      .join-text {
        padding-bottom: 62px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.6);
      }
      .banner-text {
        .size-color(24px, #FFF);
        cursor: pointer;
        .login-text {
          color: #2274E6;
        }
      }
    }
    .login-box {
      .wh(100%, auto);
      display: flex;
      justify-content: center;
      .login-con {
        padding-top: 65px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .login-user-phone {
          display: flex;
          align-items: center;
          padding-bottom: 36px;
        }
        .login-user-pwd {
          display: flex;
          align-items: center;
          padding-bottom: 28px;
        }
        .user-input-con {
          .wh(342px, 48px);
          background: rgba(245, 245, 245, 1);
          border: 1px solid rgba(235, 235, 235, 1);
          border-radius: 4px;
          padding-left: 18px;
        }
        .user-input-text {
          width: 82px;
          text-align: right;
          .size-color(18px, #4D4D4D);
        }
        .login-pwd-opt {
          display: flex;
          margin-left: auto;
          width: 360px;
          padding-bottom: 54px;
          .remember-checkbox /deep/ .el-checkbox__label {
            padding-left: 12px;
            font-size: 16px;
            color: #4D4D4D;
          }
          .remember-checkbox /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #3CAFFF;
          }
          .forget-pwd {
            margin-left: auto;
            .size-color(16px, #3CAFFF);
            &:hover {
              cursor: pointer;
              color: #39A2ED;
            }
          }
        }
        .login-user-btn {
          .wh(180px, 48px);
          background: #3CAFFF;
          border-radius: 4px;
          .size-color(16px, #FFFFFF);
          text-align: center;
          line-height: 48px;
          &:hover {
            cursor: pointer;
            background: #39A2ED;
          }
        }
      }
    }
    .login-server-pic {
      position: absolute;
      bottom: 20px;
      right: 20px;
      .wh(72px, 72px);
      .server-pic {
        .wh(72px, 72px);
      }
    }
    .login-back-box {
      position: absolute;
      top: 25px;
      left: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .login-back-pic {
        .wh(16px, 16px)
      }
      .back-text {
        padding-left: 10px;
        .size-color(16px, #FFF)
      }
    }
  }
</style>
